<!-- 订单页面 -->
<template>
	<div class="head1">
		<carttop></carttop>
	</div>
	<div class="head2">
		<carttop2></carttop2>
	</div>
	<div class="main">
		<div class="main1">
			<div class="main1-text">
				我的订单
			</div>
		</div>
		<div class="main2">
			<div class="main2-1">
				<a class="main2-1-1" href="javascript:void(0)" @click="setSelectedType('all')">全部订单</a>
				<a class="main2-1-2" href="javascript:void(0)" @click="setSelectedType(0)">待付款</a>
				<a class="main2-1-3" href="javascript:void(0)" @click="setSelectedType(1)">待发货</a>
				<a class="main2-1-4" href="javascript:void(0)" @click="setSelectedType(2)">待收货</a>
				<div class="put" style="display: flex;margin-left: auto;margin-right: 5px;">
				<el-input type="text" v-model="searchQuery" @input="handleSearch" placeholder="请输入搜索内容"/> 
				<el-button @click="performSearch">搜索</el-button> 
				</div>
				 
			</div>
			<div class="main2-2">
				<div class="main2-2-1">
					  <el-select
					    v-model="selectedTimeRangeOption"
					    placeholder="选择订单时间"
					    size="small"
						 @change="handleTimeRangeChange"
					    style="width: 138px "
					  >
					    <el-option
					      v-for="item in optionscreateTime"
					      :key="item.value1"
					      :label="item.label1"
					      :value="item.value1"
					    />
					  </el-select>
				</div>
				<div class="main2-2-2">
					订单详情
				</div>
				<div class="main2-2-3">
					收货人
				</div>
				<div class="main2-2-4">
					金额
				</div>
				<div class="main2-2-5">
					 订单状态
				</div>
			</div>

			<div v-for="(order) in filteredOrders" :key="order.id" class="main2-3">
			    <div class="main2-3-1">  
			        <div class="main2-3-1-1" style="width: 250px;">  
			            {{ order.createTime }}  
			        </div>  
			        <div class="main2-3-1-2" style="width: 300px;">  	
			            订单号：{{ order.orderNo }}  
			        </div>  
			      <div class="main2-3-1-3">
					   <el-button plain @click="open(order.id)" style="background-color: #f5f5f5;border: none;height: 30px;">
							<Delete></Delete>
						</el-button>
				   </div>
				</div>
				<div class="main2-3-2">
					<div class="main2-3-2-1">
						<div class="main2-3-2-1-1">
							<img :src="Path.imgPath + order.imgs" alt="Cart Item" style="width: 60px; height: 60px;">	
						</div>
						<div class="main2-3-2-1-2">
							{{order.name}}
						</div>
						<div class="main2-3-2-1-3">
							×{{order.count}}
						</div>
					</div>
					<div class="main2-3-2-2">
						<el-tooltip   popper-class="custom-tooltip"  placement="left" effect="light">
						    <template #content>
									<div style="margin-right:">
										{{order.linkUser}}
									</div>
									<br/>
									{{order.linkAddress}}
									<br/>
									{{order.phone}}
								</template>
						    <el-button style="border: none;font-size: 20px;padding-top: 40px;padding-bottom: 40px;">{{order.linkUser}}</el-button>
						  </el-tooltip>
					</div>
					<div class="main2-3-2-3">
						￥{{(order.count * order.price).toFixed(2)}}
					</div>
					<div class="main2-3-2-4">
						<div v-if=" order.state === 1" style="color: green;">已付款</div>
						<div v-if=" order.state === 2" style="color: gray;">已发货</div>
						<div v-else-if=" order.state === 0 " >
							<div class="pay">
								<pay
								:price="(order.price * order.count).toFixed(2)"
								:goodOfUserId="order.goodOfUserId"
								:id="order.id"
								:goodsId="order.goodsId"
								@getOrders="getOrders"
								:count="order.count">
								</pay>
							</div>
						</div>	
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="foot1"></div>
	<div class="foot">
		<footerLzm></footerLzm>
	</div>
</template>

<script setup>
import carttop from '@/views/top-zjm/cart-top.vue';
import carttop2 from '@/views/top-zjm/cart-top2.vue';
import Delete from '@/components/components-zjm/delete.vue';
import pay from '@/views/function-zjm/pay.vue';  
import footerLzm from '@/views/footer-lzm'
import { computed,watch } from 'vue';
import { ref,onMounted } from 'vue'
import { get,post } from '@/plugins/axios'
import { Path } from "@/constant/index"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router';

const route = useRoute()
const optionscreateTime = [
  {
    value1: 'last3Days',
    label1: '近三天订单',
  },
  {
    value1: 'last3Month',
    label1: '近三个月订单',
  },
  {
    value1: 'lastHalfYear',
    label1: '近半年订单',
  },
  {
    value1: 'lastYear',
    label1: '近一年订单',
  },
  {
    value1: 'last3Years',
    label1: '近三年订单',
  },
];
const open = (orderId) => {  
  ElMessageBox.confirm(  
    '您确定要删除该商品吗?',  
    {  
      confirmButtonText: '确定',  
      cancelButtonText: '取消',  
      type: 'warning',  
    }  
  )  
    .then(() => {  
      handleDelete(orderId); // 在确认后调用 handleDelete  
    })  
    .catch(() => {  
      ElMessage({  
        type: 'info',  
        message: '取消操作',  
      });  
    });  
}; 
const startcreateTime = ref(null);  
const endcreateTime = ref(null);  
function handleTimeRangeChange(value) {  
  if (value === 'last3Days') {  
    const now = new createTime();  
    startcreateTime.value = new createTime(now - 3 * 24 * 60 * 60 * 1000); // 三天前  
    endcreateTime.value = now; // 今天  
  }  
	else if(value==='last3Month'){
		 const now = new createTime(); 
		 startcreateTime.value = new createTime(now - 90 * 24 * 60 * 60 * 1000); // 三个月前
		 endcreateTime.value = now;
	}
	else if(value==='lastHalfYear'){
		 const now = new createTime(); 
		 startcreateTime.value = new createTime(now - 180 * 24 * 60 * 60 * 1000); // 六个月前
		 endcreateTime.value = now;
	}
	else if(value==='lastYear'){
		 const now = new createTime(); 
		 startcreateTime.value = new createTime(now - 365 * 24 * 60 * 60 * 1000); // 六个月前
		 endcreateTime.value = now;
	}
	else if(value==='last3Years'){
		 const now = new createTime(); 
		 startcreateTime.value = new createTime(now - 1095 * 24 * 60 * 60 * 1000); // 六个月前
		 endcreateTime.value = now;
	}
}  
const searchQuery = ref('');
const selectedTimeRangeOption = ref('');  
const order1=ref([]);
const selectedType = ref('all'); 

getOrders()
function getOrders(){
	get(Path.orderGoodsGet,{
	},content => {
		order1.value = content
	})
}
const st = ref(route.query.st)

const updateSelectedType = (newSt) => {
        console.dir('watch!');
				if(newSt==='dfk'){
					selectedType.value = 0
				}
				else if(newSt === 'dfh'){
						selectedType.value = 1
				}
				else{
					selectedType.value = 2
				}
    };
	updateSelectedType(route.query.st);
	
watch(
      () => route.query.st,
      (newSt) => {
        console.log('route.query.st changed to:', newSt);
        updateSelectedType(newSt);
      }
    );

function setSelectedType(type) {  
		selectedType.value = type;  
}
function handleDelete(orderId) {  
	post(Path.orderDelete,{id: orderId},content => {
		getOrders()
	})
}  
function performSearch() {    
 startcreateTime.value = null; endcreateTime.value = null; selectedType.value = 'all';   
}
const filteredOrders = computed(() => {  
  let filtered = order1.value;  
  if (startcreateTime.value && endcreateTime.value) {  
    filtered = filtered.filter(order => {  
      const ordercreateTime = new createTime(order.createTime);  
      return ordercreateTime >= startcreateTime.value && ordercreateTime <= endcreateTime.value;  
    });  
  }  
	if (selectedType.value !== 'all') {  
	    filtered = filtered.filter(order => {  
	      return order.state === selectedType.value;  
	    });  
	  }  
	  if (searchQuery.value.trim() !== '') {  
	      filtered = filtered.filter(order => {  
	        return (  
	          order.orderNo.toLowerCase().includes(searchQuery.value.toLowerCase()) ||  
	          order.description.toLowerCase().includes(searchQuery.value.toLowerCase())  
	        );  
	      });  
	    }  
  return filtered;  
});  
  
</script>

<style scoped lang="scss">

// 输入框样式和触发事件
::v-deep .el-input__wrapper {
background-color: #f2f4f7;
border-radius: 5 px;
 border: 1px solid #dcdfe6; // 添加默认边框
 border-radius: 8px;
}
::v-deep .el-input__wrapper:hover {
background-color: #ffffff;
border-color: #409eff; 
transition: background-color 0.3s ease, border-color 0.3s ease; // 添加过渡效果
}
	.head1{
		z-index: 10;
		
	}
	.head2{
		z-index: 2;
	}
	.main{
		height: auto;
		background-color: #f5f5f5;
		padding-left: 17%;
		padding-right: 17%;
		padding-top: 1.5%;
		.main1{
			margin-bottom: 20px;
			background-color: white;
			height: 58px;
			display: flex;
			padding-left: 20px;
			align-items: center;
			.main1-text{
				font-size: 13px;
				color: #3f3f3f;
			}
		}
		.main2{
			height: auto;/* 最后改 */
			background-color: white;
			padding: 10 px 20 px 20 px;
			
			.main2-1{
				background-color:white;
				height: 44.6px;
				display: flex;
				padding: 10px 0px;
				align-items: center;
				
				.main2-1-1{
					margin-right: 20px;
					font-size: 13px;
					color: #fe0000;
					text-decoration: none;
				}
				.main2-1-2{
					margin-right: 20px;
						font-size: 13px;
							color: #fe0000;
							text-decoration: none;
				}
				.main2-1-3{
					margin-right: 20px;
						font-size: 13px;
							color: #fe0000;
							text-decoration: none;
				}
				.main2-1-4{
					margin-right: 20px;
						font-size: 13px;
							color: #fe0000;
							text-decoration: none;
				}
				put{
					 padding: 8px;  
					  display: flex;
					  margin-left: 50%;
						display: flex;
				}
				button{
					font-size: 13px;
					padding: 8px;
					 
				}
			}
			
			.main2-2{
				display: flex;
				align-items: center;
				height: 34px;
				background-color: #f5f5f5;
				.main2-2-1{
					padding: 0px 12px 0px 20px;
				}
				.main2-2-2{
					font-size: 12px;
					color: #666666;
					margin-left: 13%;
				}
				.main2-2-3{
					font-size: 12px;
					color: #666666;
					margin-left: 12%;
				}
				.main2-2-4{
					font-size: 12px;
					color: #666666;
					margin-left: 17%;
				}
				.main2-2-5{
					font-size: 12px;
					color: #666666;
					margin-left: 20%;
				}
			}
			.main2-3{
				
				.main2-3-1{
					height: 31px;
					background-color: #f5f5f5;
					margin-top: 20px;
					border-left: 0.3px solid #ababab;
					border-top:  0.3px solid #ababab;
					border-right:  0.3px solid #ababab;
					display: flex;
					font-size: 12px;
					align-items: center;
					padding: 1px;
					.main2-3-1-1{
						margin-left: 2%;
					}
					.main2-3-1-2{
						margin-left: 5%;
					}
					.main2-3-1-3{
						margin-left: 62%;
						&:hover {
						  color: #ff5500;  
						}  
					}
				}
				.main2-3-2{
					display: flex;
					height: 101.4px;
					border-left: 0.3px solid #ababab;
					border-right:  0.3px solid #ababab;
					border-bottom: 0.3px solid #ababab ;
					.main2-3-2-1{
						height: 100%;
						width: 40%;
						border-right: 0.3px solid #ababab ;
						display: flex;
						padding: 14px 0px;
						.main2-3-2-1-1{
							margin-left: 6%;
						}
						.main2-3-2-1-2{
							margin-left: 5% ;
							width: 150px;
							font-size: 12px;
						}
						.main2-3-2-1-3{
							margin-left: 5%;
							color: #a1a1a1;
						}
					}
					.main2-3-2-2{
						height: 100%;
						width: 20%;
						border-right: 0.3px solid #ababab ;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.main2-3-2-3{
						height: 100%;
						width: 20%;
						border-right: 0.3px solid #ababab ;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 15px;
						color: #5e5e5e;
					}
					.main2-3-2-4{
						height: 100%;
						width: 20%;
						border-right: 0.3px solid #ababab ;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #5e5e5e;
						font-size: 15px;
					}
				}
			}
		}
	}
	.foot1{
		height: 180px;
		background-color: #f5f5f5;
	}
	.foot{
		margin-top: 10px;
	}
</style>